<template>
    <div class="register d-flex justify-content-center align-items-center flex-column">
        <div class="avatar mb-4">
            <img src="" alt="">
        </div>

        <h1 class="mb-4">
            <a href="">登录</a>
            /
            <a href="">注册</a>
        </h1>

        <div id="form" class="d-flex justify-content-center align-items-center flex-column">
            <div class="mb-2">
                <label>
                    <i class="fa fa-user" style="font-size: 25px;vertical-align: top;"></i>&nbsp;
                    <input type="text" placeholder="请输入用户名">
                    <span></span>
                </label>
            </div>

            <div>
                <label>
                    <i class="fa fa-lock" style="font-size: 25px;vertical-align: top;"></i>&nbsp;
                    <input type="password" placeholder="请输入密码" style="margin-left: 1px;">
                    <span></span>
                </label>
            </div>

            <div>
                <label>
                    <i class="fa fa-lock" style="font-size: 25px; vertical-align: top;"></i>&nbsp;
                    <input type="password" placeholder="请确认密码" style="margin-left: 1px;">
                    <span></span>
                </label>
            </div>

            <div>
                <label>
                    <i class="fa fa-phone" style="font-size: 25px;vertical-align: top;"></i>&nbsp;
                    <input type="tel" placeholder="请输入手机号" style="margin-left: -2px;">
                    <span></span>
                </label>
            </div>

            <div class="mr-2">
                <label>
                    <i class="fa fa-envelope" style="font-size: 25px;vertical-align: top;"></i>&nbsp;
                    <input type="number" placeholder="请输入验证码" >
                    <span style="left: 13px;"></span>
                </label>

                <a href="#" class="btn btn-primary">获取验证码</a>
            </div>
        </div>

        <button class="my-4">注册</button>

        <div class="pattern w-75 pt-4 d-flex justify-content-between align-items-center">
            <div class="qq">
                <img src="" alt="">
            </div>

            <div class="wchat">
                <img src="" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Register"
    }
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    .register{
        position: fixed;
        width: 300px;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: #ddd;
    }
    .register .avatar{
        width: 100px;
        height: 100px;
        border: 1px solid;
    }
    .register #form div{
        position: relative;
    }
    .register #form div a{
        position: absolute;
        padding: 2px 0;
        width: 100px;
        left: 132px;
        top: 0;
    }
    .register label{
        cursor: pointer;
    }
    .register input:not([type=checkbox]){
        width: 200px;
        height: 30px;
        line-height: 30px;
        padding-left: 3px;
        border: none;
        outline: none;
        border-bottom: 2px solid #ccc;
        transition: all .4s ease;
    }
    .register input:not([type=checkbox])+span{
        position: absolute;
        top: 28px;
        left: 5px;
        display: block;
        width: 200px;
        height: 2px;
        background-image: linear-gradient(to right, #03001e, #7303c0, #ec38bc);
        margin-left: 17px;
        transition: all .4s ease;
        transform: scale(0);
    }
    .register input:focus+span{
        transform: scale(1);
    }
    .register button{
        border: none;
        outline: none;
        width: 150px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        background-color: #1575ff;
        border-radius: 10px;
        padding-bottom: 33px;
    }
    .register .pattern{
        position: relative;
        border-top: 1px solid;
        z-index: -1;
    }
    .register .pattern::before {
        content: "使用以下方式登录";
        position: absolute;
        padding: 0 5px;
        background-color: #ddd;
        left: 45px;
        top: -14px;
    }
    .register .pattern div{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border:1px solid;
        background-color: #fff;
    }
</style>
